<template>
  <NFlex :justify="actions?.align || 'center'" align="center">
    <slot name="form_actions_pre" :size :mode :submit-loading />

    <NvButton
      v-if="resolveVisible(actions?.clearBtn, true)"
      :content="t.button.clear"
      :size
      v-bind="resolveBind(actions?.clearBtn)"
      :disabled="submitLoading"
      :default-render-icon="() => h(Dismiss24Filled)"
      @click="emits('clear')"
    />

    <template v-if="group?.type === 'steps'">
      <NvButton
        v-if="resolveVisible(actions?.prevBtn, true)"
        :content="t.button.prev"
        :size
        v-bind="resolveBind(actions?.prevBtn)"
        :disabled="current <= 1 || submitLoading"
        :default-render-icon="() => h(ArrowPrevious20Filled)"
        @click="emits('prevStep')"
      />
      <NvButton
        v-if="resolveVisible(actions?.nextBtn, true) && current < group.items.length"
        :content="t.button.next"
        type="primary"
        :size
        v-bind="resolveBind(actions?.nextBtn)"
        :default-render-icon="
          () => h(ArrowPrevious20Filled, { style: 'transform: rotate(180deg)' })
        "
        @click="emits('nextStep')"
      />
    </template>

    <NvButton
      v-if="
        resolveVisible(actions?.submitBtn, true)
          && (props.group?.type === 'steps'
            ? current >= props.group.items.length
            : true)
      "
      :content="t.button.save"
      type="primary"
      :size
      v-bind="resolveBind(actions?.submitBtn)"
      :loading="submitLoading"
      :default-render-icon="() => h(Checkmark24Filled)"
      @click="emits('submit')"
    />

    <slot name="form_actions" :size :mode :submit-loading />
  </NFlex>
</template>

<script setup lang="tsx">
import type { NvFormActionsOption, NvFormMode, NvGroupOption } from '@/form/types'
import type { Size } from '@/types'
import {
  ArrowPrevious20Filled,
  Checkmark24Filled,
  Dismiss24Filled,
} from '@vicons/fluent'
import { NFlex } from 'naive-ui'
import { h } from 'vue'
import { NvButton } from '@/components'
import { resolveBind, resolveVisible } from '@/utils'
import { useLocale } from '@/utils/locale'

interface Props {
  actions?: NvFormActionsOption
  size?: Size
  mode: NvFormMode
  group?: NvGroupOption
  current: number
  submitLoading: boolean
}
interface Emits {
  (e: 'submit'): void
  (e: 'clear'): void
  (e: 'prevStep'): void
  (e: 'nextStep'): void
}
const props = defineProps<Props>()
const emits = defineEmits<Emits>()

const t = useLocale()
</script>
